<template>
  <div id="page-activity-group">
    <h2>{{ activity.act_name }} - 活动报名表设置</h2>

    <Card>
      <Row class="mt30">
        <Col span="16" offset="4">
          <Form
            ref="form"
            label-position="top">
            <FormItem label="待选字段">
              <div class="hr"></div>
              <Row>
                <Col span="11">
                  <CheckboxGroup v-model="unselectedCheckbox" @on-change="onChangeCheckbox">
                    <Checkbox
                      :key="index"
                      :label="item.code"
                      v-for="(item, index) in unselected">
                      <span>{{ item.name }}</span>
                    </Checkbox>
                  </CheckboxGroup>
                </Col>
              </Row>
            </FormItem>
            <FormItem label="已选字段" class="mt30">
              <div class="hr"></div>
              <ul>
                <li
                  :key="index"
                  v-for="(item, index) in selected"
                  class="mt10">
                  <span class="field-name">{{ item.colName }}:</span>
                  <Select v-model="selected[index].required" style="width:200px">
                    <Option :value="0">必填</Option>
                    <Option :value="1">非必填</Option>
                  </Select>
                  <Input v-model="selected[index].fieldMemo" placeholder="请输入字段说明" style="width: 300px; margin-left: 10px;"></Input>
                  <span class="field-remove" @click="onRemoveCheckbox(item, index)">
                    <Icon type="close" color="#ed3f14"></Icon>
                  </span>
                </li>
              </ul>
            </FormItem>
            <FormItem>
              <Row>
                <Col span="11">
                  <Button type="info" @click="submitForm" class="ml20">保存</Button>
                </Col>
              </Row>
            </FormItem>
          </Form>
        </Col>
      </Row>
    </Card>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import _ from 'underscore'
  import activityApi from '@/api/activity'
  import { SYS_FLAG } from '@/store/constant'

  export default {
    name: 'page-activity-group',
    props: [
      'activity'
    ],
    data () {
      return {
        query: {
          pkActBaseInfo: this.$route.params.activityId,
          currentPage: 1,
          limit: 100
        },
        unselectedCheckbox: [],
        unselected: [],
        selected: []
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo',
        bmColCodeList: 'bmColCodeList'
      })
    },
    methods: {
      async detail () {
        let pkActBaseInfo = this.$route.params.activityId
        const { body } = await activityApi.entryForm.list(this.query)
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          let { content } = body.responseData
          if (content) {
            // 后端对象转化为 可提交对象
            this.selected = content.map((item) => {
              return {
                fieldCode: item.fieldCode,
                pkActBaseInfo: pkActBaseInfo,
                colName: item.colName,
                token: localStorage.getItem(SYS_FLAG.AUTH),
                required: item.required,
                fieldMemo: item.fieldMemo
              }
            })

            // 临时对象 - 从完整表中删除已选中
            let unselected = _.clone(this.bmColCodeList)
            for (let item of this.selected) {
              let index = _.findIndex(unselected, {code: item.fieldCode})
              if (index > -1) {
                unselected.splice(index, 1)
              }
            }

            // 最终赋值
            this.unselected = unselected
          } else {
            this.unselected = _.clone(this.bmColCodeList)
          }
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      },
      onChangeCheckbox (selectedCode) {
        let pkActBaseInfo = this.$route.params.activityId
        let currentSelected = _.findWhere(this.bmColCodeList, {
          code: selectedCode[0]
        })
        this.selected.push({
          fieldCode: currentSelected.code,
          pkActBaseInfo: pkActBaseInfo,
          colName: currentSelected.name,
          token: localStorage.getItem(SYS_FLAG.AUTH),
          required: 0
        })

        // chechbox
        let index = _.findIndex(this.unselected, (item) => {
          return item.code === selectedCode[0]
        })

        if (index > -1) {
          setTimeout(() => {
            this.unselected.splice(index, 1)
            this.unselectedCheckbox = []
          }, 300)
        }
      },
      onRemoveCheckbox (currentSelected, index) {
        this.$Modal.confirm({
          title: '确认删除该字段吗',
          content: '<p>确认删除该字段？</p>',
          onOk: () => {
            this.removeCheckbox(currentSelected, index)
          }
        })
      },
      removeCheckbox (currentSelected, index) {
        this.selected.splice(index, 1)
        this.unselected.push({
          name: currentSelected.colName,
          code: currentSelected.fieldCode
        })
      },
      async submitForm () {
        if (this.selected.length === 0) {
          this.$Modal.confirm({
            title: '提醒',
            content: '<p>至少选择一个报名字段</p>',
            onOk: () => {
            }
          })
          return
        }
        const { body } = await activityApi.entryForm.update(this.selected)
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$Message.info('保存成功')
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      }
    },
    mounted () {
      this.$store.dispatch('getCode', 'bm_col')
      this.detail()
    }
  }
</script>

<style lang="less" scoped>
  .field-name {
    width: 100px;
    display: inline-block;
    margin-left: 20px;
  }

  .field-remove {
    cursor: pointer;
    margin-left: 10px;
  }

  .hr {
    height: 1px;
    background: rgba(0,0,0,.08)
  }
</style>
